/**
 * @description  : 案由选择
 * @descriptionDetail : 案由选择
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:25:58
 */
<template>
  <view class="page case-bg">
    <theme-navbar :isWhite="true" backText="返回" title="案由选择"> 
      <view class="theme-color" @click="mergeAdd">
        确定
      </view>
    </theme-navbar>
    <view class="case-main">
      <view class="header case-con">
        <view class="col con-one">
          主案由
        </view>
        <view class="col con-tow">
          辅案由
        </view>
        <view class="col con-three">
          案由名称
        </view>
      </view>
      <view class="case-body">
        <view class="ever-list case-con" v-for="(item, index) in caseList" :key="index">
          <view class="list-middle-radio con-one">
            <u-radio-group v-model="value" @change="radioGroupChange">
              <u-radio :name="item.value"></u-radio>
            </u-radio-group>
          </view>
          <view class="list-middle-checkBox con-tow"> 
            <u-checkbox shape="square" :name="item.value" :disabled="item.checkBoxDisabled" v-model="item.checked" @change="checkboxChange"></u-checkbox> 
          </view>
          <view class="list-name con-three">
            <text class="name-info">
              {{ item.name }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import common from "@/components/commonMixins.js";
import casePropertyService from '@/service/utilities/caseProperty.services.js';
export default { 
  mixins:[common,],
  data() {
    return { 
      // 模拟案由列表数据
      caseList: [],
      value: "",// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      saveList:[], // 最终保存主案由和辅案由
      radioList:[], // 保存主案由
      currentRadio:0, // 记录当前单选框索引
    };
  },
  mounted() {
    this.init();
  },
  methods: { 
    init(){
      let self = this;
      uni.showLoading({
        title:'加载中...',
        mask:true,
      });
      casePropertyService.initCaseProperty().then(res => {
        uni.hideLoading();
        if(self.$u.test.array(res)){
          self.caseList = [];
          res.forEach(item => {
            self.caseList.push({
              name: item.caseProperty,
              checked: false,
              checkBoxDisabled: false,
              value:item.casePropUuid,
              extra:item,
            });
          });
        }
      }).catch(e => {
        uni.hideLoading();
        console.log('错误了');
      });
    },
    // 复选框  设置 checkbox 的 checked 属性判断是否选中 
    checkboxChange(item) { 
      console.log('=99=' + JSON.stringify(item));
    },
    // 单选框 
    radioGroupChange(value) {
      console.log('radio===' + value);
      // 初始化变量
      this.radioList = [];
      this.currentRadio = 0;
      let self = this;
      // 遍历的得到 当前的案由列表索引
      this.caseList.map((item,index) => {
        if(value == item.value){
          self.currentRadio = index;
        }
      });
      // 点击单选框 禁用后面的复选框
      this.caseList.map((item,index) => {
        this.caseList[index].checkBoxDisabled = false; 
      });
      this.caseList[this.currentRadio].checked = false; 
      this.caseList[this.currentRadio].checkBoxDisabled = true; 
      // 保存点击单选框选中的值
      this.radioList.push(this.caseList[this.currentRadio]);
    },
    // 合并选中的单选和多选
    mergeAdd(){
      this.saveList = [];
      let self = this;
      this.radioList.map((item) => {
        self.saveList.push(item.extra)
      });
      this.caseList.map((item) => {
        if(item.checked){
          self.saveList.push(item.extra);
        }
      })
      // this.saveList = this.uniqueArray(this.saveList);
      if(this.saveList.length == 0){
        this.showToast();
      }else{
        console.log('===' + JSON.stringify(this.saveList));
        self.backPrev({
          paramKey: "backCase",
          param : this.saveList,  
        });
      }
    },
    showToast() {
      this.$api.toast('请选择案由');
    },
  },
};
</script>

<style lang="scss" scoped>
.case-bg {
  width: 100%;
  height: auto; 
  padding: 30rpx;
  background-color: $uni-bg-color-grey;
  .case-main {
    box-shadow: 0 0 16rpx -8rpx $uni-text-color;
    background-color: $uni-bg-color;
    view[class^="col"] {
      color: $font-color-light;
      text-align: center;
      font-size: 28rpx;
    }
    .header {
      display: flex;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 2rpx solid $font-color-disabled;
    }
    .ever-list {
      height: auto;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 2rpx solid $font-color-disabled;
      view[class^="list-middle"]{ 
        text-align: center;
      }
      .list-name { 
        display: inline-block; 
        color:$uni-text-color;
        font-size: 32rpx;
      }
    }
    .mini-btns{
      margin-left: 20rpx;
    }		
  }
}
.theme-color{
	color: $u-type-primary;
	margin-right: 30rpx;
}
// 公共布局
.case-con {
  display: flex;
  .con-one {
    flex: 1;
  }
  .con-tow {
    flex: 1;
  }
  .con-three {
    flex: 3;
  }
}
</style>